<!-- eslint-disable vuejs-accessibility/form-control-has-label -->
<template>
  <div class="container">
<form class="login-form">
<h2>注 册</h2>
<input
  type="text"
  v-model="username"
  placeholder="用户名"
/>
<input
  type="password"
  v-model="password"
  placeholder="密码"
/>
<button @click="onlogin">注册</button>
</form>
</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { ElMessage } from 'element-plus';
import { Reg } from '@/api/http';
import { getFileNameUUID } from '@/util/alioss.js';

const store = useStore();
const router = useRouter();
const username = ref('');
const password = ref('');
const limits = ref('普通');
// eslint-disable-next-line consistent-return
const onlogin = async () => {
  console.log(username.value, password.value);
  if (username.value === '' || password.value === '') return ElMessage({ message: '请输入账号或密码', type: 'error' });
  const datas = {
    id: getFileNameUUID(),
    username: username.value,
    password: password.value,
    limits: limits.value,
  };
  const res = await Reg(datas);
  if (res.status === 201) {
    ElMessage({ message: '注册成功', type: 'success' });
  }
  router.push('/login');
};
</script>

<style scoped>
.container {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("https://starry-lixu.oss-cn-hangzhou.aliyuncs.com/202209141908599.jpg") fixed no-repeat;
    background-size: cover;
}
.login-form {
    width: 240px;
    height: 220px;
    display: flex;
    flex-direction: column;
    padding: 40px;
    text-align: center;
    position: relative;
    z-index: 100;
    background: inherit;
    border-radius: 18px;
    overflow: hidden; /* 隐藏多余的模糊效果*/
}
  .login-form h2 {
   font-size: 18px;
   font-weight: 400;
   color: #3d5245;
  }

  .login-form input,
  .login-form button {
   margin: 6px 0;
   height: 36px;
   border: none;
   background-color: rgba(255, 255, 255, 0.3);
   border-radius: 4px;
   padding: 0 14px;
   color: #3d5245;
  }
</style>
